<template>
  <div class="main-header">
    <div class="mh-left">{{ nowTime }}</div>
    <div class="mh-middle">加气站数据驾驶舱</div>
    <div class="mh-right">
      <border-box-2 style="width: 140px; height: 50px; line-height: 50px; text-align: center">
        灵丘服务区南站
      </border-box-2>
    </div>
  </div>
</template>

<script setup lang="ts">
import moment from 'moment';
import { ref, reactive, onMounted, toRefs, onBeforeUnmount } from 'vue';
import { BorderBox2 } from '@kjgl77/datav-vue3';

const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const timeId = ref();
const state = reactive({
  nowTime: moment().format('YYYY-MM-DD HH:mm:ss') + '  ' + weeks[moment().day()],
});

function getnowTime(nowTime: any): any {
  timeId.value = setInterval(() => {
    nowTime.value = moment().format('YYYY-MM-DD HH:mm:ss') + '  ' + weeks[moment().day()];
  }, 1000);
}
onMounted(() => {
  getnowTime(nowTime);
});
onBeforeUnmount(() => {
  clearTimeout(timeId.value);
});
const { nowTime } = toRefs(state);
</script>

<style lang="scss" scoped>
.main-header {
  height: 64px;
  display: flex;
  margin: 0 80px;
  justify-content: space-between;
  align-items: flex-end;
  color: rgb(1, 134, 187);
  .mh-left {
    font-size: 20px;

    a:visited {
      color: rgb(1, 134, 187);
    }
  }

  .mh-middle {
    font-size: 30px;
  }

  // .mh-left,
  // .mh-right {
  //   width: 450px;
  // }
}
</style>
